import { Component } from 'react'
import {View, Text, Input } from '@tarojs/components'
import './index.scss'
import Taro from '@tarojs/taro'

export default class LgPagination extends Component {
  preBtn() {
    if (this.props.pageIndex > 1) {
      this.props.handlePage(this.props.pageIndex - 1);
    }
  }
  nextBtn() {
    if (this.props.pageIndex < this.props.total) {
      this.props.handlePage(this.props.pageIndex + 1);
    }
  }
  changeVal(event) {
    var {value} = event.detail;
    if (value >= 1 && value <= this.props.total) {
      this.props.handlePage(value);
    } else {
      return this.props.value;
    }
  }
  render () {
    return (
      <View className={`lg_pagination clear ${this.props.className || ""}`} style={this.props.style || ""}>
        <View className={`left ${this.props.pageIndex <= 1 ? "lg_pagination_btn_ban" : "lg_pagination_btn"}`} onClick={this.preBtn.bind(this)}>上一页</View>
        <View className="lg_pagination_msg left">
          <Input className="lg_pagination_input" onChange={this.changeVal.bind(this)} type="number" value={this.props.pageIndex || 1} />
          <Text className="lg_pagination_total">/{this.props.total}</Text>
        </View>
        <View className={`left ${this.props.pageIndex >= this.props.total ? "lg_pagination_btn_ban" : "lg_pagination_btn"}`} onClick={this.nextBtn.bind(this)}>下一页</View>
      </View>
    )
  }
}
